<template>
  <div class="no-data">
    <div class="wrap">
      <IconSvg v-if="showIcon" :icon-class="icon" />
      <p v-if="showText" class="mt-8" v-html="text" />
      <slot />
    </div>
  </div>
</template>
<script>
export default {
    name: 'NoData',
    props: {
        icon: {
            type: String,
            default: 'no-data'
        },
        showIcon: {
            type: Boolean,
            default: true
        },
        showText: {
            type: Boolean,
            default: false
        },
        text: {
            type: String,
            default: '暂无数据'
        },
        size: {
            type: [Number, String],
            default: 12
        },
    }
}
</script>
<style lang="scss" scoped>
.no-data {
  display: flex;
  justify-content: center;
  min-height: 6.25rem;
  .wrap {
    @media only screen and (min-width: 1024px) {
      .SvgIcon{
       font-size: 10.5rem !important;
      }
      .svg-icon {
        width: 28.5rem !important;
        height: 20rem !important;
      }
    }
    @media only screen and (max-width: 1023px) {
      .SvgIcon {
        font-size: 4.25rem !important;
      }
      .svg-icon {
        width: 14.25rem !important;
        height: 10rem !important;
      }
    }
  }
}
</style>
